<!doctype html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>后台登录-X-admin2.2</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <#include "common/header-static.ftl">
    <script>
        // 是否开启刷新记忆tab功能
        // var is_remember = false;
    </script>
</head>
<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">管理员管理</a>
                <a href="">数据监控统计</a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-md12 x-so"
                          style="text-align: left;margin-bottom: 10px;margin-top: 60px;margin-left: 20px;">
                        &nbsp;&nbsp;<span style="">查询日期:</span>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="" name="theDate"
                                   id="theDate" value="${theDate}">
                        </div>
                        &nbsp;&nbsp;<span style="">环境名称:</span>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="evnName" id="evnName" placeholder="">
                        </div>
                        &nbsp;&nbsp;<span style="">监控类型:</span>
                        <div class="layui-input-inline">
                            <select id="viewCountMessageType" lay-filter="viewCountMessageType" lay-verify="required"
                                    lay-search="">
                                <option value="1">Controller</option>
                                <option value="3">Mapper</option>
                            </select>
                        </div>
                        <a class="layui-btn" id="search" style="height: 38px; line-height: 38px;"
                           data-type="reload">搜索</a>
                    </form>
                </div>
                <h3 class="layui-colla-title">分析列表<i class="layui-icon layui-colla-icon"></i></h3>
                <div class="layui-card-body ">
                    <table id="messageStatistics" lay-filter="messageStatistics" style="margin: 0 auto;"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        layui.use(['table', 'laydate', 'form'], function () {
            var form = layui.form;
            var laydate = layui.laydate;
            form.on('select(viewCountMessageType)', function (data) {
                initMessageStatistics();
            });
            laydate.render({
                elem: '#theDate'
                , type: 'date'
                , max: 0
                , done: function (value, date) {
                    initMessageStatistics()
                }
            });
        });
        $("#search").click(function () {
            initMessageStatistics();
        });
        initMessageStatistics();
    });

    function initMessageStatistics() {
        var theDate = $("#theDate").val();
        var evnName = $("#evnName").val();
        var viewCountMessageType = $("#viewCountMessageType").val();
        layui.use(['table', 'form'], function () {
            var $ = layui.$;
            var table = layui.table;
            var form = layui.form;
            form.render();
            //这里渲染表格
            table.render({
                elem: '#messageStatistics'
                //  , height: 'full-160'
                // , width : '1465'
                , height: '342'
                , even: true
                , size: 'sm'
                , method: 'post'
                , url: '${request.contextPath}/admin/monitor/messageStatistics' //数据接口
                , where: {
                    messageType: viewCountMessageType,
                    theDate: theDate,
                    evnName: evnName
                }
                , parseData: function (res) { //res 即为原始返回的数据
                    console.log(res);
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.total,//res.total, //解析数据长度
                        "data": res.data //解析数据列表
                    };
                }
                , loading: false
                , page: false //开启分页
                , contentType: 'application/json'
                , limits: [10, 30, 50]
                , cols: [[ //表头
                    // {field: 'num', title: '', width: 100, align: 'left'},
                    {type: 'numbers', title: '序号', width: '5%'},
                    {field: 'requestUrl', title: '请求Url', width: '50%', align: 'left'},
                    {
                        field: 'docCount', title: '请求次数', width: '15%', align: 'left',
                        sort: true
                    },
                    {
                        field: 'avgNumber', title: '平均时长', width: '10%', align: 'left',
                        templet: function (data) {
                            return data.avgNumber + 'ms';
                        },
                        sort: true
                    },
                    {
                        field: 'maxNumber', title: '最大时长', width: '10%', align: 'left',
                        templet: function (data) {
                            return data.maxNumber + 'ms';
                        },
                        sort: true
                    },
                    {
                        field: 'minNumber', title: '最小时长', width: '10.25%', align: 'left',
                        templet: function (data) {
                            return data.minNumber + 'ms';
                        },
                        sort: true
                    }
                ]]
            });
        });
    }

</script>
</body>

</html>